  <!doctype html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{margin: 0;}
      body{
        overflow: hidden;
      }
	  .demo{
		  width: 100%;
		  height: auto;
	  }
	  button{
		  cursor: pointer;
			position: absolute;
			z-index: 99;
	  }
		.btn2{
			top: 0rem;
			left: 0rem;
		}
		.btn1{
			bottom: 0rem;
			right: 0rem;
		}
    </style>
   <script src="js/three.min.js"></script>
   <script src="js/OrbitControls.js"></script>
	<script src="js/GLTFExporter.js"></script>
	<script src="js/GLTFLoader.js"></script>
  	
  </head>
  </head>
  <body>
	  <div class="demo">
		  <canvas id="three-canvas" class="rain"></canvas>
		  <button class="btn1" onclick="gotos()">去学校</button>
		  <button  class="btn2" onclick="back()">返回</button>
		</div>
  <script>
	    
	function back(){
		window.history.back(); 
	}
	
    // 生成一个具体的物体
    // function getMesh(){
    //     // 生成点, 添加到Geometry实例对象中
    //     const geometry = new THREE.Geometry()
      
    //     const Materials = new THREE.MeshNormalMaterial({
    //         side: THREE.DoubleSide
    //     })
    //     return new THREE.Mesh(geometry, Materials)
    // }
  
    // function getPlane(){
    //   const g=new THREE.BoxGeometry(5,5,5);
    //    const loader = new THREE.TextureLoader()
    //   const texture=loader.load("./textures/dm.jpg")
    //   const m=new THREE.MeshBasicMaterial({
    //         map:texture,
    //         side: THREE.DoubleSide
    //     })
    //   const line=new THREE.Mesh(g,m)
    //   line.position.set(0,0,0)
    //   return line
    // }
    
  function createWorldBackground(){
  	const loader=new THREE.CubeTextureLoader()
  	  scene.background=loader.setPath("./textures/cube/skybox/")
  	.load([
  		'px.jpg',
  		'nx.jpg',
  		'py.jpg',
  		'ny.jpg',
  		'pz.jpg',
  		'nz.jpg'
  		])
  }
  function gotos(){
	  let loader=new THREE.CubeTextureLoader()
	  	  scene.background=loader.setPath("./textures/cube/Park2/")
	  	.load([
	  		'posx.jpg',
	  		'negx.jpg',
	  		'posy.jpg',
	  		'negy.jpg',
	  		'posz.jpg',
	  		'negz.jpg'
	  		])
	  }
// 	  function loaderObj(){
// 		  var loader = new THREE.GLTFLoader();
// 
// loader.load( './textures/scene.gltf', function ( gltf ) {
// 
// 	scene.add( gltf.scene );
// 
// }, undefined, function ( error ) {
// 
// 	console.error( error );
// 
// } );
	  //}
    // 初始化
    let width = window.innerWidth
    let height = window.innerHeight
    const canvas = document.querySelector("#three-canvas")
    window.onload = resize
    window.onresize = resize
    function resize(){
        width = canvas.width = window.innerWidth
        height = canvas.height = window.innerHeight
        // 更新相机宽高比
        renderer.setSize(width, height)
        // 值
        camera.aspect =  width / height
        // 新的比例应用到世界坐标系中
        camera.updateProjectionMatrix()
    }
  
    // const box = getMesh()
    // const plane=getPlane()
  
    // 创建场景
    const scene = new THREE.Scene()
    createWorldBackground()
    // 建立一个简单的坐标系
    // const axesHelper = new THREE.AxesHelper(5)
    // scene.add( axesHelper )
    // scene.add(plane)
    // scene.add(box)
  
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 1000)
  
    // 摆放相机: 相机位置 相机朝向
    camera.position.z = 10
    camera.lookAt(0, 0, 0)
  
    const control = new THREE.OrbitControls(camera)
  
    // 渲染器
    // 渲染器在构造的时候, 是链接canvas的
    const renderer = new THREE.WebGLRenderer({
        canvas
    })
    renderer.setSize(width, height)
  
    function animation(){
        requestAnimationFrame(animation)
        //将场景被相机拍摄到的内容渲染出来
        // box.rotation.x += 0.01
        // box.rotation.y += 0.01
        // 更新控制器
        control.update()
        renderer.render(scene, camera)
    }
    animation()
  
  </script>
  </body>
  </html>
  